<template>
  <div class="view-container address-book">
    <el-row>
      <el-col :span="4">

        <el-tree :data="addressBookData" node-key="id" @node-click="nodeClick" :expand-on-click-node="false">
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
                <i :class="data.icon" style="margin-right: 5px"></i>{{ node.label }}
            </span>
        </span>
        </el-tree>

      </el-col>

      <el-col :span="20">
        <transition name="fade-transform" mode="out-in">
          <router-view />
        </transition>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import addressBookAPI from '@/api/addrbook/addbok'
  export default {
    name: 'AddressBookIndex',
    data() {
      return {
        isCollapse: true,
        companyCategory:[],
        addressBookData:[
          {
            id: -2,
            label: '个人通讯录',
            icon:'el-icon-user',
          },
        ]
      }
    },
    created() {
      this.getCompanyCategory()
      this.$router.push('/personal-office/addresss-book/ge-ren')
    },
    methods: {
      getCompanyCategory(){
        addressBookAPI.companyCategory().then(res=>{
          console.log(res.result)
          // this.companyCategory = res.result
          let company = {
            id:3,
            label:'公司通讯录',
            icon:'el-icon-bangzhu',
            children:[]
          }
          this.addressBookData.push(company)
          for(let val of res.result){
            let obj = {
              id:val.departmentId,
              label:val.departmentName,
            }
            company.children.push(obj)
            obj.children = []
            for(let item of val.children){
              obj.children.push({
                id:item.departmentId,
                label:item.departmentName,
              })
            }
          }
        })
      },
      nodeClick(data){
        console.log(data.id)
        if(data.id === -2){
          this.$router.push('/personal-office/addresss-book/ge-ren')
        }else{
          this.$router.push('/personal-office/addresss-book/gong-si/'+data.id)
        }
      },
      showAddressBook(type) {
        if (type) {

        } else {

        }
      }
    }
  }
</script>

<style lang="scss">
  .address-book {
    .el-tree-node__content {
      margin: 3px 0;
    }
  }

</style>

<style scoped lang="scss">

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .address-book {
    .view-container {
      padding-top: 0;
    }
  }
</style>
